<template>
  <div class="my-4">
    <div class="container flex-1">
      <a-form
        :model="{}"
        :wrapper-col-props="{ span: 4 }"
        :label-col-props="{ span: 2 }"
        label-align="left"
        auto-label-width
      >
        <a-form-item :label="t['商品名称']">
          <div class="w-[200px]">
            <a-input v-model="goodsQuery.goodsName" allow-clear @change="search" />
          </div>
        </a-form-item>
        <a-form-item :label="t['条形码']">
          <div class="w-[200px]">
            <a-input v-model="goodsQuery.barCode" class="w-full" allow-clear @change="search" />
          </div>
        </a-form-item>
      </a-form>

      <div class="mb-1">
        <div class="flex justify-between w-full">
          <div>
            <a-button-group>
              <a-button type="primary" @click="search"> {{ t["查询"] }}</a-button>
              <a-button @click="search">
                {{ t["刷新"] }}
              </a-button>
            </a-button-group>
          </div>
          <div class="flex gap-2">
            <a-button-group>
              <AutoMatchResource />
              <a-button @click="match"> {{ t["自动匹配"] }} </a-button>
              <a-button @click="asyncProduct">{{ t["同步门店商品素材"] }}</a-button>
            </a-button-group>
          </div>
        </div>
      </div>
    </div>
    <a-modal v-model:visible="visible" :footer="false" :title="t['同步门店商品素材']">
      <AsyncStore @close="visible = false" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { goodsAutoMatch } from "@/api/service/goods/goods";

import { useEventBus } from "@vueuse/core";

import { Message } from "@arco-design/web-vue";
import { goodsQuery, search } from "../../data/data";
import AsyncStore from "./AsyncStore.vue";
import AutoMatchResource from "./AutoMatchResource.vue";

const bus = useEventBus("resourceBus");

const visible = ref(false);
const asyncProduct = async () => {
  visible.value = true;
};

const t = translate("公共模块");

const match = async () => {
  const { msg } = await goodsAutoMatch();
  Message.info(msg);
  bus.emit("match");
};
</script>

<style lang="scss" scoped>
.table-head {
  ::v-deep(.arco-card-header) {
    border: none;
  }
  ::v-deep(.border-bottom) {
    border-bottom: 1px solid #ddd;
  }
}
</style>
